<template>
	<div class="aside">
		<div class="aside-top">在线咨询</div>
		<ul>
			<li>
				<img src="../assets/talk1.png" />
				<div v-on:mouseenter="showpic($event)" v-on:mouseleave="hidepic($event)" class="aside-text">
					<span>课程咨询</span>
					<div ref="pic1" class="iconlesson">
						<img class="icon" src="../assets/icon 03.svg" />
						<div class="tipdiv"></div>
					</div>
				</div>
			</li>
			<li>
				<img src="../assets/talk.png" />
				<div v-on:mouseenter="showpic($event)" v-on:mouseleave="hidepic($event)"  class="aside-text">
					<span>就业咨询</span>
					<div ref="pic2" class="iconlesson">
						<img class="icon" src="../assets/icon 03.svg" />
						<div class="tipdiv"></div>
					</div>
				</div>
			</li>
			<li>
				<img src="../assets/talk2.png" />
				<div  v-on:mouseenter="showpic($event)" v-on:mouseleave="hidepic($event)"  class="aside-text">
					<span>微信公众号</span>
					<div ref="pic3" class="iconlesson">
						<img class="icon" src="../assets/icon 03.svg" />
						<div class="tipdiv"></div>
					</div>
				</div>
			</li>

		</ul>
		<div class="aside-bottom">
			<img class="aside-botpic" src="../assets/top.png" />
		</div>
		
	</div>
</template>

<script>
	export default{
		name:'',
		methods:{
			showpic(event){
				console.log(event.target.lastElementChild)
				event.target.lastElementChild.style.display="block";
			},
			hidepic(event){
				console.log(event.target.lastElementChild)
				event.target.lastElementChild.style.display="none";
			}
		}
	}
</script>

<style>
	.aside-text{
		position: relative;
	}
	.iconlesson{
		position: absolute;
		height: 80px;
		width: 90px;
		top: -50px;
		right: 110px;
		background: white;
		display: none;
	}
	.icon{
		width: 80px;
		height: 90px;
	}
	.aside{
		position: fixed;
		right: 50px;
		top: 350px;
		z-index: 100;
	}
	.tipdiv{
		position: absolute;
		top: 25px;
		right: -30px;
		border: 20px solid rgba(0,0,0,0);
		border-right: 20px solid white!important;
		z-index: -1;
		-moz-transform:rotate(180deg); 	
	}
	.aside ul{
		list-style: none;
		width: 88px;
		padding: 0;
		margin: 0;
	}
	.aside li{
		font-size: 12px;
		text-align: center;
		padding-top:10px ;
		padding-bottom: 10px;
		background:#f3f1f2 ;
		border-bottom: 2px solid white;
		cursor: pointer;
	}
	.aside img{
		width: 40px;
	}
	.aside-bottom,.aside-top{
		width: 88px;
		height: 30px;
		background: -moz-linear-gradient(left,#53a6ec,#69e3d8);
		background: -webkit-linear-gradient(left,#53a6ec,#69e3d8);
		 /*background: -o-linear-gradient(left,#53a6ec,#69e3d8);*/
		color: white;
		font-size: 12px;
		text-align: center;
		line-height: 30px;
	}
	.aside-botpic{
		width: 30px!important;
	}
</style>
